<template>
  <div>
    <el-dialog
      title="指定课程"
      :append-to-body="true"
      @close="closeDio"
      :visible="dialogTableVisible"
      width="800px"
      style="padding:20px"
    >
      <ul class="cate_product" v-loading="loading">
        <li v-for="(item,index) in shopsList" :key="index" @click="addShops(item)">{{item.title}}</li>
      </ul>
    </el-dialog>
  </div>
</template>
<script>

export default {
  name: "xznewscate",
  props: {
    show: {
      type: Boolean,
      default: true
    },
    showType: {
      type: String,
      default: "table"
    }
  },
  data() {
    return {
      shopsList: [],
      dialogTableVisible: this.show,
      loading: false
    };
  },
  methods: {
    addShops(row) {
      row.url_title = "指定课程";
      this.$emit("sendShop", row);
      this.dialogTableVisible = false;
    },

    closeDio() {
      this.$emit("isshow", false);
      this.dialogTableVisible = false;
    },
    getMaterial() {
      this.loading = true;
      this.$api.getShops.get_courselistall({}).then(res => {
        if (res.data.code == 200) {
          this.shopsList=res.data.result;
        }
        this.loading = false;
      });
    }
  },
  watch: {
    show(val1, val2) {
      if (val1 == val2) {
        return;
      }
      this.getMaterial();
      this.dialogTableVisible = val1;
      this.currentPage1 = 1;
    },
    dialogTableVisible(val1, val2) {
      if (val1 == val2) {
        return;
      }
      this.$emit("isshow", val1);
    }
  },
  computed: {},
  mounted() {
    this.getMaterial();
  }
};
</script>
<style lang="less" scoped>
.cate_product {
  display: flex;
  flex-wrap: wrap;
  > li {
    width: 33%;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
  }
  li:hover {
    color: red;
  }
}
</style>
